@import "~lark-theme/theme/lark-green";
@import "./cpf.scss";

$theme-color-name: lark-green;
$border-radius: 25px;

.theme-#{$theme-color-name} {

  @include cpf($theme-color-name);


  //全局字体色
  @extend %#{$theme-color-name}-custom-font-color-base;
  // ************************************************************************************************************** //
  // ************************************************************************************************************** //
  // **************************************             滚动条               *************************************** //
  // ************************************************************************************************************** //
  // ************************************************************************************************************** //
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  ::-webkit-scrollbar-thumb {
    @extend %#{$theme-color-name}-element-ui-background-color-minor;
    border-radius: 4px;
  }

  ::-webkit-scrollbar-corner {
    background: #1c222b;
  }

  ::-webkit-scrollbar-track {
    @extend %#{$theme-color-name}-element-ui-background-color-base;
    border-radius: 0px;
  }

  // ************************************************************************************************************** //
  // ************************************************************************************************************** //
  // **************************************           element-ui            *************************************** //
  // ************************************************************************************************************** //
  // ************************************************************************************************************** //
  //el分页组件
  .el-pagination {
    .btn-prev, .btn-next.btn-next {
      background-color: transparent;
    }

    .el-icon.more.btn-quicknext, .el-icon.more.btn-quickprev {
      background-color: transparent;
      @extend %#{$theme-color-name}-element-ui-font-color-base;

      &:hover {
        @extend %#{$theme-color-name}-custom-background-color-light;
      }
    }

    li.number {
      background-color: transparent;
      @extend %#{$theme-color-name}-element-ui-font-color-base
    }

    li.number.active {
      @extend %#{$theme-color-name}-custom-background-color-light;
      @extend %#{$theme-color-name}-element-ui-font-color-light
    }
  }


  //分页组件
  .pagination-container {
    .el-pagination__jump {
      @extend %#{$theme-color-name}-element-ui-font-color-base;
    }

    .btn-prev, .btn-next {
      @extend %#{$theme-color-name}-element-ui-background-color-base;
      @extend %#{$theme-color-name}-element-ui-font-color-base;
      @extend %#{$theme-color-name}-element-ui-font-size-base;

      &:hover {

      }
    }

    .el-pager {
      li:not(.disabled).active {
        @extend %#{$theme-color-name}-element-ui-background-color-minor;
        @extend %#{$theme-color-name}-element-ui-font-color-base;
        @extend %#{$theme-color-name}-element-ui-font-size-base;
      }
    }

    .el-pagination__total {
      @extend %#{$theme-color-name}-element-ui-font-color-base;
    }
  }

  //时间选择组件样式
  .el-time-panel__btn.confirm {
    @extend %#{$theme-color-name}-custom-font-color-lighter;
  }

  .el-date-table {

    .available.current {
      span {
        @extend %#{$theme-color-name}-element-ui-background-color-minor;
        @extend %#{$theme-color-name}-element-ui-font-color-light ;
      }

    }

    th {
      @extend %#{$theme-color-name}-element-ui-font-color-base;
    }
  }

  .el-date-table {
    td.today {
      span {
        @extend %#{$theme-color-name}-custom-font-color-lighter;
      }
    }

    td.available:hover {
      @extend %#{$theme-color-name}-custom-font-color-lighter;
    }

    td.start-date, td.end-date {
      span {
        @extend %#{$theme-color-name}-element-ui-background-color-light
      }
    }
  }


  .el-date-editor {
    &.is-active {
      @extend %#{$theme-color-name}-custom-border-color-lighter;

      &:hover {
        @extend %#{$theme-color-name}-custom-border-color-lighter;
      }
    }

  }


  //
  .el-input {
    :first-child {
      border-radius: $border-radius 0 0 $border-radius;
    }

    :last-child {
      border-radius: 0 $border-radius $border-radius 0;
    }

    //  输入框内容
    .el-input__inner {
      @extend %#{$theme-color-name}-element-ui-font-color-base;
      @extend %#{$theme-color-name}-element-ui-font-size-base;


      &:focus {
        @extend %#{$theme-color-name}-custom-border-color-lighter;
      }

      &.is-focus {
        .el-input__inner {
          @extend %#{$theme-color-name}-element-ui-border-color-base;
        }
      }

      &:hover {
        @extend %#{$theme-color-name}-custom-border-color-lighter;
        @extend %#{$theme-color-name}-element-ui-border-color-base;
      }
    }


    //  插槽
    .el-input-group__append {
      @extend %#{$theme-color-name}-element-ui-border-color-base;
      @extend %#{$theme-color-name}-element-ui-background-color-lighter;
      @extend %#{$theme-color-name}-element-ui-font-color-light;
      @extend %#{$theme-color-name}-element-ui-font-size-base;

      .el-button {
        background: transparent;
      }
    }

    //  插槽
    .el-input-group__prepend {
      .el-select {
        .el-input {

          .el-input__inner {
            color: black;

            &::-webkit-input-placeholder, &::-moz-placeholder, &:-ms-input-placeholder, &::-webkit-input-placeholder, &::placeholder {
              @extend %#{$theme-color-name}-element-ui-font-color-base;
              @extend %#{$theme-color-name}-element-ui-font-size-base;
            }


          }

          .el-input__suffix {
            .el-input__suffix-inner {
              .el-input__icon {
                color: black;

              }
            }
          }
        }
      }
    }
  }

  //  按钮
  .el-button--primary, .el-button--default, .el-button--danger, .el-button--cyan, .el-button--warning, {
    @extend %#{$theme-color-name}-element-ui-background-color-minor;
    @extend %#{$theme-color-name}-element-ui-border-color-base;
    //@extend %#{$theme-color-name}-element-ui-border-radius-full;
    @extend %#{$theme-color-name}-element-ui-font-color-base;
    @extend %#{$theme-color-name}-element-ui-font-size-base;

    &:hover {
      @extend %#{$theme-color-name}-element-ui-background-color-minor;
      @extend %#{$theme-color-name}-element-ui-border-color-base;
      //@extend %#{$theme-color-name}-element-ui-border-radius-full;
    }
  }

  .el-button--text {
    @extend %#{$theme-color-name}-custom-font-color-lighter;
    @extend %#{$theme-color-name}-element-ui-font-size-base;
  }

  //  表格
  .mc-table, .project-table {
    .el-table {
      background-color: transparent;

      .el-table__expanded-cell {
        padding: 0;

        &:hover {
          background-color: transparent;
        }

      }

      .el-table__expand-icon {
        .el-icon.el-icon-arrow-right {
          @extend %#{$theme-color-name}-element-ui-font-color-base;

          &:hover {
            @extend %#{$theme-color-name}-element-ui-font-color-light;
          }
        }
      }
    }

    .el-table th.gutter {
      display: table-cell !important;
    }

    .el-table td {
      background-color: transparent;
    }


    /*双数行背景色*/
    .el-table--striped .el-table__body tr.el-table__row--striped td {
      @extend %#{$theme-color-name}-custom-background-color-base
    }


    /**
    表头
     */
    .el-table th {
      @extend %#{$theme-color-name}-custom-background-color-light
    }

    /* 单行及表头背景颜色 */
    .el-table, .el-table tr, tr.el-table__row td {
      background-color: white;
      //@extend %#{$theme-color-name}-custom-background-color-base
    }


    /* 表格表头字体颜色 */
    .el-table thead tr th div {
      @extend %#{$theme-color-name}-element-ui-font-color-light;
    }

    /* 表格内边框 */
    .el-table th.is-leaf, .el-table td {
      //@extend %#{$theme-color-name}-element-ui-table-bottom-border-color;
    }

    /* 表格内字体色 */
    .el-table {
      @extend %#{$theme-color-name}-element-ui-font-color-base;
      @extend %#{$theme-color-name}-element-ui-font-size-base;
    }

    /* 表格鼠标悬浮 */
    .el-table--enable-row-hover .el-table__body tr {
      &:hover {
        //@extend %#{$theme-color-name}-element-ui-background-color-minor;

      }
    }
  }

  .el-form {
    .el-form-item {
      .el-input {
        .el-input__inner {
          border-radius: $border-radius !important;
        }
      }
    }
  }


  /* 下拉框select  */
  .el-select-dropdown__list {
    @extend %#{$theme-color-name}-custom-background-color-base;

    .el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
      @extend %#{$theme-color-name}-element-ui-background-color-minor;
      @extend %#{$theme-color-name}-custom-font-color-light;
    }

    .el-select-dropdown__item {
      @extend %#{$theme-color-name}-element-ui-font-color-base;
    }
  }


  /* el-dropdown-menu Dropdown 下拉菜单 */
  .el-dropdown-menu {
    @extend %#{$theme-color-name}-custom-background-color-base;

    .el-dropdown-menu__item:not(.is-disabled) {
      @extend %#{$theme-color-name}-element-ui-font-color-base;

      &:hover, &.q-dro-active {
        @extend %#{$theme-color-name}-element-ui-background-color-minor;
        @extend %#{$theme-color-name}-custom-font-color-light;
      }
    }
  }


  /*  下拉框弹出面板  */
  .el-popper.el-cascader__dropdown {
    background-color: transparent !important;
    @extend %#{$theme-color-name}-element-ui-border-color-base;

    .el-cascader-panel {
      .el-cascader-menu {
        @extend %#{$theme-color-name}-custom-background-color-base;

        .el-cascader-menu__list {
          .el-cascader-node {
            &.is-active {
              @extend %#{$theme-color-name}-element-ui-background-color-minor;

              .el-cascader-node__label {
                @extend %#{$theme-color-name}-element-ui-font-color-base;
                @extend %#{$theme-color-name}-element-ui-font-size-base;
              }
            }

            &.is-selectable.in-active-path, &.is-selectable:focus, &:hover {
              @extend %#{$theme-color-name}-element-ui-background-color-minor;
              @extend %#{$theme-color-name}-custom-font-color-light;

              span {
                @extend %#{$theme-color-name}-custom-font-color-light;
              }
            }

            span {
              @extend %#{$theme-color-name}-element-ui-font-color-base;
              @extend %#{$theme-color-name}-element-ui-font-size-base;
            }
          }
        }
      }
    }
  }

  .el-progress-bar__innerText {
    color: #fff
  }


  .esri-view-root {
    .esri-ui {
      .esri-ui-inner-container {
        .esri-component {
          .esri-popup__main-container.esri-widget {
            .esri-popup__content {
              .el-tabs {
                .el-tabs__header {
                  .el-tabs__item {
                    @extend %#{$theme-color-name}-custom-font-color-base;
                    @extend %#{$theme-color-name}-custom-font-size-base;

                    &.is-active {
                      @extend %#{$theme-color-name}-custom-font-color-light;
                    }
                  }
                }

                .el-tabs__content {
                  .el-tab-pane {
                    .table-container {
                      .lark-dynamic-table {
                        .el-table {
                          background: transparent;

                          tr, th {
                            background: transparent !important;

                            td {
                              background: transparent !important;
                            }
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  .esri-popup__main-container.esri-widget {
    .esri-popup__footer {
      display: none;
    }

    .esri-popup__header {
      .esri-popup__header-buttons {
        .esri-popup__button[title="停靠"] {
          display: none;
        }
      }
    }

    .esri-popup__content {
      .el-tabs {
        .el-tabs__header {
          .el-tabs__item {
            @extend %#{$theme-color-name}-custom-font-color-base;
            @extend %#{$theme-color-name}-custom-font-size-base;

            &.is-active {
              @extend %#{$theme-color-name}-custom-font-color-light;
            }
          }
        }

        .el-tabs__content {
          .el-tab-pane {
            .table-container {
              .lark-dynamic-table {
                .el-table {
                  background: transparent;

                  tr, th {
                    background: transparent !important;

                    td {
                      background: transparent !important;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  //  登录
  .login {
    .el-input {
      .el-input__inner {
        border-radius: $border-radius;
      }
    }

    .el-login-footer {
      @extend %#{$theme-color-name}-custom-background-color-light;

      .QR-code {
        .el-popover__reference-wrapper {
          .el-button {
            @extend %#{$theme-color-name}-custom-background-color-base;
            color: #209014;
            border-radius: $border-radius;
          }
        }
      }
    }
  }

  .home-page {
    .query-container {
      .query-select-root {
        .el-input-group__append {
          border: none;
        }
      }

      .area-select-root {
        .el-input {
          .el-input__inner {
            border-radius: $border-radius;
          }
        }
      }
    }
  }

  .lineTable-root {

    .lineTable-table {


      .lineTable-column {

        .lineTable-header, .lineTable-value {
          @extend %#{$theme-color-name}-custom-border-color-lighter;

          &:hover {
          }
        }

        .lineTable-value {
          .content-hidden {
          }
        }

        .row-hover {
          @extend %#{$theme-color-name}-custom-font-color-lighter;
        }
      }
    }
  }

  .clt-root {
    .ctlSearch-root {

      .lark-card-root {
        .lark-card__body {
          background: transparent;

          .more-search {
            @extend %#{$theme-color-name}-custom-background-color-base;
          }
        }
      }
    }

  }


  //采集信息
  .ctlInfo-root {
    .current-user-row {
      @extend %#{$theme-color-name}-custom-border-color-lighter;

      &:hover {
        @extend %#{$theme-color-name}-custom-font-color-lighter;
      }
    }

    .ctlInfo-body {
      .ctlInfo-root-content-item {

        .item-label {
          .label-icon {
            @extend %#{$theme-color-name}-custom-font-color-lighter ;
          }
        }

      }
    }
  }

  .infoDetail-root {
    @extend %#{$theme-color-name}-custom-border-color-lighter;
  }

  .btnTabs-root {
    @extend %#{$theme-color-name}-element-ui-font-color-light ;
    @extend %#{$theme-color-name}-custom-background-color-light;

    .is-active {
      @extend %#{$theme-color-name}-custom-font-color-light;
    }
  }

  //采种田左侧列表
  .leftDrawer-root {
    .leftDrawer-body {
      .leftDrawer-list-row {
        @extend %#{$theme-color-name}-custom-border-color-lighter;

        &:hover {
          .leftDrawer-list-row-hover {
            @extend %#{$theme-color-name}-custom-font-color-lighter;
          }
        }
      }


      .leftDrawer-list-row-icon {
        @extend %#{$theme-color-name}-custom-font-color-lighter ;
      }

      .leftDrawer-list-row-operation-btn {
        @extend %#{$theme-color-name}-custom-font-color-lighter ;
      }
    }
  }


  //野外采集任务表格
  .ctlTask-root {
    .ctlTask-list-row {
      @extend %#{$theme-color-name}-custom-border-color-lighter;

      &:hover {
        .ctlTask-list-row-hover {
          @extend %#{$theme-color-name}-custom-font-color-lighter;
        }
      }
    }

    .more-data {
      @extend %#{$theme-color-name}-custom-border-color-lighter;
    }

    .ctlTask-list-row-icon {
      @extend %#{$theme-color-name}-custom-font-color-lighter ;
    }

    .ctlTask-list-row-operation-btn {
      @extend %#{$theme-color-name}-custom-font-color-lighter ;
    }
  }

  //种质资源库
  //列表
  .assetList-root {
    .el-tree {

      .el-dropdown {
        @extend %#{$theme-color-name}-custom-font-color-lighter ;

        //&:hover {
        //  @extend %#{$theme-color-name}-custom-font-color-light;
        //}
      }
    }
  }


  .lark-drawer-root {
    .drawer-content-root {
      .drawer-content {
        .grass-draw-content {
          .el-form {
            .el-form-item {
              .el-form-item__label {
                @extend %#{$theme-color-name}-custom-font-color-base;
                @extend %#{$theme-color-name}-custom-font-size-base;
              }
            }
          }

          .el-table {
            background: transparent;

            tr, th {
              background: transparent !important;
              @extend %#{$theme-color-name}-custom-font-color-base;
              @extend %#{$theme-color-name}-custom-font-size-base;

              &:hover {
                td {
                  @extend %#{$theme-color-name}-custom-font-color-light ;
                }
              }

              td {
                background: transparent !important;
                @extend %#{$theme-color-name}-custom-font-color-base;
                @extend %#{$theme-color-name}-custom-font-size-base;
              }
            }
          }

          .pagination-container {
            background: transparent;
          }
        }
      }
    }
  }

  .pagination-container {

    .el-pagination.is-background {
      .btn-prev, .btn-next {
        @extend %#{$theme-color-name}-custom-background-color-light;
        @extend %#{$theme-color-name}-custom-font-color-base;
        @extend %#{$theme-color-name}-custom-font-size-base;
      }

      .el-pager {
        li {
          @extend %#{$theme-color-name}-custom-background-color-light;
          @extend %#{$theme-color-name}-custom-font-color-base;
          @extend %#{$theme-color-name}-custom-font-size-base;

          &:not(.disabled).active {
            @extend %#{$theme-color-name}-custom-background-color-light;
            @extend %#{$theme-color-name}-custom-font-color-light;
          }
        }
      }
    }
  }


  .el-button:not(.is-circle) {
    border: none !important;


    &.el-button--primary, &.el-button--success {
      @extend %#{$theme-color-name}-custom-background-color-light;

      i, span {
        @extend %#{$theme-color-name}-element-ui-font-color-light;
      }
    }


    &.el-button--default, &.el-button--primary, &.el-button--success {

      @extend %#{$theme-color-name}-element-ui-font-color-light;

      &:hover {
        @extend %#{$theme-color-name}-custom-background-color-light;
        @extend %#{$theme-color-name}-custom-font-color-light;

        i, span {
          @extend %#{$theme-color-name}-custom-font-color-light;
        }
      }
    }
  }
}
